<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    //绘制扇形动画, 就是每隔几毫秒( 20 毫秒)擦除以前绘制的内容, 然后在以前绘制的基础上比以前多绘制一点东西. 这里多绘制的内容就是由角度决定. 比如一开始角度从 -Math.PI / 2 开始绘制. 那么每次角度都 +0.1, 直到 绘制到 Math.PI * 3 / 2 为止.
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";

    ctx.fillStyle = 'blue';
    var startAngle = -Math.PI/2,
        angle = startAngle,
        x = 200 , y = 200,
        r = 100;
    var intervalId = setInterval(function(){
        //清除之前绘制的内容
        ctx.clearRect( 0 , 0 , canvas.width, canvas.height);
        //角度增量
        angle += 0.1;
        //判断是否停止计时器
        if(angle >= Math.Pi * 3/2){
            clearInterval(intervalId);
            angle = Math.PI * 3/2;
            console.log("绘制完成");
        }
        //绘制
        ctx.moveTo( x , y);
        ctx.arc(x , y , r , startAngle , angle);
        ctx.fill();
    },20);
</script>
</body>
</html>